<template>
    <Component
        :is="is"
        class="nav-item"
        v-bind="props"
        exact
    >
        <AIcon :type="item.icon" />
        <span class="nav-item__title">{{ item.title }}</span>
    </Component>
</template>

<script>
export default {
    name: 'NavItem',

    props: {
        item: {
            type: Object,
            required: true,
        },
    },

    computed: {
        is() {
            return this.item.href ? 'a' : 'router-link';
        },

        props() {
            return this.item.href ? {
                href: this.item.href,
                target: '_blank',
            } : {
                to: this.item.path,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.nav-item {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    color: #636C78;
    font-size: 14px;

    &:hover {
        background-color: #E8EAEC;
    }

    &.router-link-active {
        background-color: #fff;
        color: #2254F4;
        font-weight: 500;
    }
}

.nav-item__title {
    margin-left: 6px;
}
</style>
